<template>
	<div class="page-content courseInfo base-content">
		<ul class="base-item-tab">
			<li>
				<router-link to="/BaseSetting/teachTime">教学时间</router-link>
			</li>
			<li>
				<router-link to="/BaseSetting/courseInfo" class="active">课程信息</router-link>
			</li>
			<li>
				<router-link to="/BaseSetting/teacher">教师信息</router-link>

			</li>
			<li v-if="classType==2">
				<router-link to="/BaseSetting/classRoomInfo">教室信息</router-link>
			</li>
			<li v-if="tnId == 66">
				<router-link to="/BaseSetting/courseAndTeach">教师及课时分配</router-link>
			</li>
		</ul>
		<div class="row">
			<div class="col-xs-12">

				<div class="title-2">
					<span class="txt-t"></span>
					<div class="btns">
						<template>

							<el-tooltip :manual="true" :value="teacherModifyBtn" class="item" effect="dark" v-bind:content="secontent" placement="right">
								<el-button class="btn btn-pink" @click="setClass">设置课时</el-button>
							</el-tooltip>

						</template>

					</div>
				</div>
				<div>
					<el-table class="table1" ref="multipleTable" :data="courseList" v-loading.body="tableLoading" tooltip-effect="dark" highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
						<el-table-column type="selection" style="width: 5%" @click="alocked()">
						</el-table-column>
						<el-table-column label="课程名称">
							<template scope="scope">{{ scope.row.courseName }}</template>
						</el-table-column>
						<el-table-column prop="name" label="课时">
							<template scope="scope">{{ scope.row.time }}节/周</template>
						</el-table-column>
					</el-table>
					<!--<p class="warn">若要设置某老师必须带某班时，则设置“所带班级”项</p>-->

					<el-dialog title="设置课时" :visible.sync="dialogFormVisible">
						<el-form :model="form">

							<el-row>
								<el-col :span="24"><span class="font1">课程名称：</span><input v-model="courseNa" readonly="readonly" class="readonly"></el-col>
							</el-row>
							<el-row class="rlRow">
								<el-col :span="24"><span class="font1"><span class="redx">*</span>每周课时：</span><input v-model="time"> 节/周</el-col>
							</el-row>
							<span class="wranke">“4+1”表示4节单堂1节连堂共六课时</span>
						</el-form>

						<el-tooltip :manual="true" :value="saveBtn" class="item" effect="dark" v-bind:content="warnText" placement="right" v-bind:type="subType">
							<el-button class="btn-save-base layerSave" @click="saveClassTime">保存</el-button>
						</el-tooltip>

					</el-dialog>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'

	export default {
		props:['tnId'],
		data() {
				return {
					user: {},
					subType: '',
					urla: '',
					tableLoading: true,
					key: false,
					saveKey: false,
					courseList: [],
					currentRow: null,
					courseNa: '',
					"courseId": "课程ID",
					"time": "",
					"time1": "",
					"courseId": "",
					multipleSelection: [],
					dialogFormVisible: false,
					form: {
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: ''
					},
					formLabelWidth: '120px',
					teacherModifyBtn: false,
					saveBtn: false,
					taskId: '',
					classType: 0,
					par: 0,
					warnText: "每周课时输入应为单独自然数或X+X形式",
					secontent: "请选择一项"
				}
			},
			mounted() {
				this.getCourseList();
			},
			methods: {
				getCourseList() {
					this.urla = utils.UrlConfig.saveOrUpdateCourseTime;
					this.taskId = sessionStorage.getItem('taskId');
					this.classType = sessionStorage.getItem('classType');

					//字符串转为数值
					if(typeof(this.classType) == 'string') {
						this.classType = Number(this.classType)
					}
					this.$http.get(utils.UrlConfig.queryCourseInfoByTaskId + '&taskId=' + this.taskId)
						.then(res => {
							res = res.data;
							if(res.rtnCode === "0000000") {
								this.tableLoading = false;
								this.courseList = res.bizData;

							} else {
								this.$message.error(res.msg);
							}

						}).catch(error => {
							console.log(error)
						})
				},
				teacherModify() {
					alert(this.multipleSelection.length)
					this.teacherModifyBtn = true;
					setTimeout(() => {
						this.teacherModifyBtn = false;
					}, 2000)

				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
					if(this.multipleSelection.length == 1) {
						this.key = true;
						this.courseNa = this.multipleSelection[0].courseName;
						this.courseId = this.multipleSelection[0].courseId;

					} else {
						this.key = false;

					}
				},
				setClass() {

					if(this.multipleSelection.length == 1) {
						this.teacherModifyBtn = false;

						this.courseNa = this.multipleSelection[0].courseName;
						this.courseId = this.multipleSelection[0].courseId;

						this.time = this.multipleSelection[0].time
						this.dialogFormVisible = true;
					} else if(this.multipleSelection.length == 0) {
						this.secontent = "请选择一项"
						this.teacherModifyBtn = true;
						setTimeout(() => {
							this.teacherModifyBtn = false;
						}, 2000)

					} else {
						this.secontent = "设置课时只能选择一项"
						this.teacherModifyBtn = true;
						setTimeout(() => {
							this.teacherModifyBtn = false;
						}, 2000)
					}
				},
				saveClassTime(event) {

					//var reg = /(^[1-9]([0-9]*$)|^[0-9]$)/; //符合第一位不为0的正整数
					//var reg = /(^([0-9]*$)|^[0-9]$)/; //符合第一位可以为0的正整数
					var reg = /(^[0-9][1-9]([0-9]*$)|^[1-9]$)/; //符合第一位可以为0，第二位不为0的正整数,符合不为0的一位数
					var reg1 = /^[0-9]+\+[0-9]{1,}$/gi; //符合+

					const twoNum = this.time.split('+');

					if(reg1.test(this.time) && reg.test(twoNum[0]) && reg.test(twoNum[1]) && (twoNum[1] != 0)) {
						this.par = 1;
					} else {
						this.par = 0;
					}
					if((reg.test(this.time) && this.time != '') || this.par || (this.time == 10)) {

						if(this.time < 11 || (parseInt(twoNum[0])<11 && parseInt(twoNum[1]) < 11)) {
							this.saveBtn = false;
							this.courseId = this.multipleSelection[0].courseId;
							const courseId = this.multipleSelection[0].courseId;
							this.time1 = this.time.replace('+', '*');
							this.$http.post(utils.UrlConfig.saveOrUpdateCourseTime + "&taskId=" + this.taskId + "&courseId=" + courseId + "&time=" + this.time1)
								.then(res => {

									res = res.data;
									if(res.rtnCode === "0000000") {
										this.getCourseList();
										this.dialogFormVisible = false;
										this.$message({
											message: '保存成功！',
											type: 'success'
										});

									} else {
										this.$message.error(res.msg);
									}

								}).catch(error => {
									console.log(error)
								})

						} else {
							this.warnText = "请输入正确的课时"
							this.saveBtn = true;
							setTimeout(() => {
								this.saveBtn = false;
							}, 2000);

						}
					} else {
						//this.warnText = "每周课时输入应为1-10的单独自然数或X+X形式"
						this.warnText = "请输入正确的课时"
						this.saveBtn = true;
						setTimeout(() => {
							this.saveBtn = false;
						}, 2000);

					}

				}
			}
	}
</script>

<style>
	thead tr th {
		border-right: 1px solid #dfe6ec;
		text-align: center!important;
	}
	
	thead tr .el-table-column--selection .cell {
		display: none;
	}
	
	table tr td {
		text-align: center;
	}
	
	input {
		width: 100px;
		border-radius: 2px;
		border: 1px solid #DBDBDB;
	}
	
	.el-dialog__header {
		padding: 10px 12px 6px 12px;
		background-color: #f5f5f4;
		border: 1px solid lightgrey;
	}
	
	.el-dialog__title {
		color: #CB171D;
		font-size: 13px;
	}
	
	.el-dialog__close {
		font-size: 12px;
	}
	
	.el-row {
		margin-bottom: 16px;
	}
	
	.page-content .layerSave {
		margin: 30px auto 0 auto!important;
		background: #36c6d3;
		color: white;
	}
	
	.courseInfo .el-dialog--small {
		width: 27% !important;
	}
	
	.el-dialog--small .readonly {
		background: white!important;
		border: 0px;
	}
	
	.courseInfo .base-item-tab {
		padding-bottom: 7px;
	}
	
	.courseInfo .warn {
		color: #b0b0b0;
		margin-top: 5px;
	}
	
	.courseInfo {
		padding-left: 0px;
	}
	
	.courseInfo .btn-pink,
	.btn-pink:focus {
		background-color: #ff6059!important;
		border-color: #ff6059;
		color: #fff!important;
		border: 0px!important;
		line-height: 7px!important;
	}
	
	.courseInfo .base-item-tab li+li+li a {
		border-right: 1px solid #D8D8D8!important;
	}
	
	.courseInfo .base-item-tab li:last-child a {
		border-right: 0 !important;
	}
	
	.wranke {
		margin-left: 71px;
		font-size: 12px;
	}
	
	.rlRow {
		margin-bottom: 2px!important;
	}
	
	.redx {
		color: #CB171D;
	}
</style>